import React, { Component } from 'react'
import { NavBar, FlatList, Image /* Item, Icon */ } from 'components'
import moment from 'moment'
import { post } from '../../../utils'

export default class MyMessage extends Component<any, any> {

    public state = {
        data: {
            customerMessage: [
                {
                    shopImgUrl: require('../../../assets/myFollow_shopImg.png'),
                    messageTitle: '香影旗舰店',
                    messageNum: 2,
                    messageTime: moment(new Date()).format('LL'),
                    messageContent: '亲，请问您平时穿多大的码呢？体重...'
                },
                {
                    shopImgUrl: require('../../../assets/myFollow_shopImg.png'),
                    messageTitle: '爱华仕背包自营旗舰店',
                    messageNum: 1,
                    messageTime: moment(new Date()).format('LL'),
                    messageContent: '亲，欢迎您光临爱华仕背包自营旗舰...'
                },
            ]
        }
    }

    public render(): JSX.Element {
        // const { data } = this.state
        const { msgData } = this.props
        const systemMessage = [{
            messageType: 1,
            messageTitle: '优惠促销',
            messageNum: msgData.salemsg.count,
            messageTime: msgData.salemsg.time,
            messageContent: msgData.salemsg.content
        },
        {
            messageType: 2,
            messageTitle: '账户通知',
            messageNum: msgData.usermsg.count,
            messageTime: msgData.usermsg.time,
            messageContent: msgData.usermsg.content
        },
        {
            messageType: 3,
            messageTitle: '交易物流',
            messageNum: msgData.logmsg.count,
            messageTime: msgData.logmsg.time,
            messageContent: msgData.logmsg.content
        },
        {
            messageType: 4,
            messageTitle: '系统消息',
            messageNum: msgData.sysmsg.count,
            messageTime: msgData.sysmsg.time,
            messageContent: msgData.sysmsg.content
        }]
        return (
            <section className="myMessage">
                <div className="myMessage_placehoder">
                    <div className="myMessage_top">
                        <NavBar
                            title={`我的消息 ${msgData.all.count ? `(${msgData.all.count})` : ''}`}
                        />
                    </div>
                </div>
                <div>
                    <FlatList
                        data={systemMessage}
                        renderItem={
                            (item: any, index: number) => {
                                return (
                                    <div className="myMessage_item" onClick={this.handleGoToDetail.bind(this, item.messageType)} key={index}>
                                        <div className="myMessage_item_img">
                                            <Image src={this.getMessageImg(item.messageType)} />
                                            {this.getGade(item.messageNum, index)}
                                        </div>
                                        <div className="myMessage_item_content">
                                            <div className="myMessage_item_content_title">
                                                <p>
                                                    {item.messageTitle}
                                                </p>
                                                <p>{item.messageTime}</p>
                                            </div>
                                            <div className="myMessage_item_content_article">
                                                {item.messageContent}
                                            </div>
                                        </div>
                                    </div>
                                )
                            }
                        }
                    />
                </div>
                {/* <div>
                    <div className="myMessage_service_title"><Item title={<Icon type="customer"><span className="myMessage_service_title_text">客服消息</span></Icon>} /></div>
                    <FlatList
                        data={data.customerMessage}
                        renderItem={
                            (item: any, index: number) => {
                                return (
                                    <div className="myMessage_service" onClick={this.handleGoToShop} key={index}>
                                        <div className="myMessage_service_img">
                                            <Image src={item.shopImgUrl} />
                                            <span className="DINPro">{item.messageNum}</span>
                                        </div>
                                        <div className="myMessage_service_content">
                                            <div className="myMessage_service_content_title">
                                                <p>
                                                    {item.messageTitle}
                                                </p>
                                                <p>{item.messageTime}</p>
                                            </div>
                                            <div className="myMessage_service_content_article">
                                                {item.messageContent}
                                            </div>
                                        </div>
                                    </div>
                                )
                            }
                        }
                    />
                </div> */}
            </section>
        )
    }

    public componentDidMount() {
        this.getData()
    }

    private getGade = (num: number, index: number) => {
        if (num) {
            return <span className="DINPro" key={index}>{num}</span>
        }
        return
    }

    private getData() {
        const { userInfo, SET_USER_MESSAGE } = this.props
        post('usersapi/userMessageStatusNum', {
            userId: userInfo.id
        }).then((data: any) => {
            SET_USER_MESSAGE(data)
        })
    }
    private handleGoToDetail = (id: number = 1) => {
        switch (id) {
            case 1:
                this.props.history.push('/My/promotionsMsg')
                break
            case 2:
                this.props.history.push('/My/accountMsg')
                break
            case 3:
                this.props.history.push('/My/logisticsMsg')
                break
            case 4:
                this.props.history.push('/My/systemMsg')
                break
            default: this.props.history.push('/My/message')
        }
    }
    // private handleGoToShop = () => {
    //     console.log(0)
    // }
    private getMessageImg = (type: number) => {
        switch (type) {
            case 1:
                return require('../../../assets/myMessage_type0.png')
            case 2:
                return require('../../../assets/myMessage_type1.png')
            case 3:
                return require('../../../assets/myMessage_type2.png')
            case 4:
                return require('../../../assets/myMessage_type3.png')
            default: return require('../../../assets/myMessage_type0.png')
        }
    }
}